<template>
	<view class="">
		<image style="display:block;margin:50rpx auto 20rpx" class="img72" src="/static/icon/right.png" />
		<h2 class="db tc f16 mt20" style="font-weight: bold;color:#68BF7B;">询价已发送！</h2>
		<view class="interestBox mt30 f600 tc">
			邀请更多优质工厂报价
		</view>
		<view class="" style="padding:20rpx;" v-if="list && list.length != 0">
			<view class="factory_box" v-for="(item,index) in list" :key="index">
				
				<view class="df ac sb">
					<view
						:class="item.doorboard != '' && item.doorboard ? 'factory_img' : 'factory_img df ac jc fc'">
						<view class="" style="width: 100%;height:100%;"
							v-if="item.doorboard != '' && item.doorboard">
							<image :src="getImgSrc(item.doorboard)" mode="aspectFill">
							</image>
							<view class=""
								style="position: absolute;left: 10rpx;top: 10rpx;width: 100rpx;height: 36rpx;">
								<image
									style="position: absolute;left: 0rpx;top: 1rpx;width: 100rpx;border-radius: 0rpx;"
									src="@/static/icon/rzns_icon.png" mode="widthFix"></image>
								<view class="factory_year">
									入驻{{ item.year }}年
								</view>
							</view>
						</view>
						<view class="" v-else>
							<view class="df jc">
								<image style="width:80rpx;"
									:src="getImgSrc('/uploads/20241023/17296638126718934463b45.png')"
									mode="widthFix"></image>
							</view>
							<view class="mt10" style="color:#BBBBBB;">
								未上传形象照
							</view>
						</view>
					</view>
					<view class="factory_content">
						<h2 class="f16 c28 f600 mt5 factory_title" style="font-size: 32rpx;">
						{{ item.company }}
						</h2>
						<view class="df ac mt5" style="width: 100%;">
							<view class="df ac mr5" :style="isIndex ? 'margin-right:10rpx;' : 'margin-right:2rpx;'"
								v-if="item.latitude != '0' && item.longitude != '0'">
								<view class="df ac " style="transform: translateY(3rpx);">
									<uni-icons type="location" color="#1050c7" size="20"></uni-icons>
									<!-- <image style="width: 30rpx;" src="../../static/ditubiao.png" mode="widthFix"></image> -->
								</view>
								<view :class="isIndex ? 'f13 c10' : 'f12 c10'">
									距您{{ item.distance_in_km}}{{item.unit}}
								</view>
							</view>
							<!-- 至尊会员 -->
							<view class="df ac mr5" v-if="item.grade === 2 && item.grade_type === 1">
								<image :style=" isIndex ? 'height: 38rpx;' : 'height: 32rpx;'"
									:src="getImgSrc('/uploads/20250228/174070970167c11f451f7ad.png')" mode="heightFix">
								</image>
							</view>
							<!-- 基础会员 -->
							<view class="df ac mr5" v-if="item.grade === 2 && item.grade_type === 0">
								<image :style=" isIndex ? 'height: 38rpx;' : 'height: 32rpx;'"
									:src="getImgSrc('/uploads/20250228/174070968667c11f3636140.png')" mode="heightFix">
								</image>
							</view>
							<view class="df ac" v-if="item.state === 1">
								<image :style=" isIndex ? 'height: 52rpx;' : 'height: 45rpx;' "
									src="@/static/icon/gsrz_icon.png" mode="heightFix">
								</image>
							</view>
						</view>
						<view class="df ac mt5" style="width: 100%;">
							<view class="factory_content_name f14">工艺：</view>
							<view class="factory_content_text f14">
								{{ item.machining ? item.machining : '--' }}
							</view>
						</view>
						<view class="df ac mt5" style="width: 100%;">
							<view class="factory_content_name f14">行业：</view>
							<view class="factory_content_text f14">
								{{ item.service_industry ? item.service_industry : '--'}}
							</view>
						</view>
						<view class="mt5 f14"
							style="width: 100%;color:gray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display:flex;align-items:center;justify-content:center">
							<view style="display:flex;flex-direction: column;width:50%;text-align:center;border-right:1px solid #D1D1D1">
								<view>员工数：</view>
								<view>{{ item.staff ? item.staff : '--' }}</view>
							</view>
							<view style="display:flex;flex-direction: column;width:50%;text-align:center">
								<view>工厂面积：</view>
								<view>{{ item.factory_area ? item.factory_area : '--'}}</view>
							</view>
						</view>
					</view>
				</view>
				<view :class="item.is_invite ? 'invite cf is_invite' : 'invite cf'" @click="invite(index)">
					{{ item.is_invite ? '已邀请' : '邀请' }}
				</view>
			</view>
		</view>
		<van-popup :show="showPopup" @close='showPopup = false' round custom-style='background:rgba(0,0,0,0);'>
			<view class="" style="display: flex;flex-direction: column;align-items: center;">
				<image :src="img_path + img" mode="widthFix" style="width: 600rpx;" :round='true'
					:show-menu-by-longpress="true"></image>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import http from '../../utils/http';
	export default {
		data(){
			return {
				img_path: http.img_path,
				showPopup:false,
				list: [],
				img:'',
				inquiry_info:null,
				id:0,
				list_info:{},
				isIndex:false
			}
		},
		onLoad(opt) {
			// console.log(opt)
			this.id = opt.id
			http.request('base/configData').then((res) => {
				this.img = res.data.xtwxcggl
				this.showPopup = true
			}).catch((res) => {
				console.log(res);
			});
			
			this.list_info = JSON.parse(opt.list_info) || {}
			this.inquiry_info = JSON.parse(opt.info) || {}
			
			const lat = uni.getStorageSync('latitude')
			const long = uni.getStorageSync('longitude')
			
			if(lat && long){
				this.getList(lat,long)
			} else {
				const that = this
				uni.getLocation({
					isHighAccuracy: true,
					type: 'gcj02',
					success(res) {
						const lt = res.latitude
						const lng = res.longitude
						that.getList(lt,lng)
					},
					err(err) {
						console.log(err)
					}
				})
			}
			
			
		},
		onShow() {
			
		},
		methods:{
			getList(lat,long){
				http.request('user_settled/list', {
					page: 1,
					pageSize: 10,
					longitude: this.list_info.longitude,
					latitude: this.list_info.latitude,
					my_longitude : long,
					my_latitude : lat,
					keyword: '',
					distance: 0,
					// machining: opt.machining_id ? opt.machining_id : '',
					machining:"",
					service_industry: 0,
					province: '',
					city: '',
					type:this.list_info.longitude ? 0 : 1
				}).then(res=>{
					let list = []
					res.data.data.map(item=>{
						if(item.id != this.id){
							list.push({...item,is_invite:false})
						}
					})
					
					this.list = list.slice(0,5)
					this.list.forEach(item=>{
						item.unit = "公里"
						const distance = parseFloat(item.distance_in_km);
						if (isNaN(distance)) {
						    // console.error('Invalid distance value:', item.distance_in_km);
						    item.distance_in_km = 0;
						} else {
						    if (distance >= 100) {
						        item.distance_in_km = Math.floor(distance);
						    } else if (distance >= 1) {
						        item.distance_in_km = distance.toFixed(1);
						    } else {
						        item.distance_in_km = Math.floor(distance * 1000);
						        item.unit = "米";
						    }
						}
					})
				})
			},
			getYear(data) {
				const inputDate = new Date(data);
				const currentDate = new Date();
				const yearDiff = currentDate.getFullYear() - inputDate.getFullYear();
				const currentMonth = currentDate.getMonth();
				const currentDay = currentDate.getDate();
				const inputMonth = inputDate.getMonth();
				const inputDay = inputDate.getDate();
				console.log(yearDiff)
				const year = yearDiff + 1
				return year
			},
			invite(index){
				const file_name = this.inquiry_info.file_name.map(item=>item.name) || []
				const file = this.inquiry_info.file_name.map(item=>item.url) || []
				if(this.list[index].is_invite){
					return
				}
				http.request('demand/add',{
					user_settled_id:this.list[index].id,
					source:3,
					quote_type:this.inquiry_info.is_quotation,
					drawing:this.inquiry_info.drawing,
					file,
					file_name,
					spare_parts_name:this.inquiry_info.spare_parts_name
				}).then(res=>{
					http.request('demand/getIp', {
						type: 7,
						id:res.data.relation_id
					}).then((rest) => {
						this.list.map((item,idx)=>{
							if(index == idx){
								item.is_invite = true
							}
							return item
						})
						console.log(this.list[index])
						uni.showToast({
							title:'邀请成功',
							icon:'none'
						})
					}).catch((error) => {
						console.log(error);
						uni.showToast({
							title:'操作失败',
							icon:'none'
						})
					});
				}).catch(err=>{
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.invite{
		width: 160rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color:#68BF7B;
		border-radius: 20rpx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 20rpx;
		
	}
	.is_invite{
		background-color: transparent !important;
		border: 1px solid #68BF7B !important;
		color:#68BF7B !important;
	}
	.factory_box {
		background-color: #FFF;
		padding: 20rpx;
		/* margin-top: 20rpx; */
		border-radius: 15rpx;
		position:relative;
	}
	
	.factory_year {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
		font-size: 22rpx;
		text-align: center;
	}
	
	.factory_img {
		width: 34%;
		height: 290rpx;
		position: relative;
		border-radius: 15rpx;
		background-color: #EBEBEB;
	}
	
	.factory_img image {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}
	.factory_title{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.factory_content {
		width: 64%;
		height: 290rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	
	
	.factory_content_name {
		width: 85rpx;
		color: gray;
	}
	
	.factory_content_text {
		flex:1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.factory_img_item {
		width: 160rpx;
		height: calc(160rpx * 0.66);
		/* height: 120rpx; */
	}
	
	.factory_img_item image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
</style>